<!DOCTYPE html>
<html>
<head>
<title>MobileScreenSize</title>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/mobile-screen-size-plugin.js"></script>
<style>
.row {
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 30px;
	margin: 20px 10px;
}
</style>
</head>
<body>
	<div id="dpr" class="row"></div>
	<div id="physicsSize" class="row"></div>
	<div id="deviceSize" class="row"></div>
	<script>
		$(function() {
			var dpr = MobileScreen.getDevicePixelRatio();
			$("#dpr").html("device pixel ratio: " + dpr);

			var pw = MobileScreen.getPhysicalScreenWidth();
			var ph = MobileScreen.getPhysicalScreenHeight();
			$("#physicsSize").html(
					"physics width: " + pw + ", physics height: " + ph);

			var dw = MobileScreen.getPixelScreenWidth();
			var dh = MobileScreen.getPixelScreenHeight();
			$("#deviceSize")
					.html("device width: " + dw + ", device height: " + dh);
		});
	</script>
</body>
</html>